<template>
  <lay-container
    fluid="true"
    style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-table
          :page="page"
          :columns="columns"
          :dataSource="dataSource"
          :default-toolbar="defaultToolbar"
          v-model:selectedKeys="selectedKeys"
          size="sm"
          @row="rowClick"
          @change="change">
          <template v-slot:toolbar>
            <lay-button
              size="xs"
              type="primary"
              prefix-icon="layui-icon-upload-drag"
              >导入模板下载</lay-button
            >
            <lay-button size="xs"  prefix-icon="layui-icon-download-circle">数据导入</lay-button>
            <lay-button size="xs"  prefix-icon="layui-icon-upload-drag">保存</lay-button>
            <lay-button size="xs"  prefix-icon="layui-icon-upload-drag">数据导出</lay-button>
          </template>
          <template v-slot:username="{ data }">
            {{ data.username }}
          </template>
          <template v-slot:password="{ data }">
            {{ data.password }}
          </template>
          <template v-slot:operator="{}">
            <lay-button
              size="xs"
              type="primary"
              >修改</lay-button
            >
            <lay-button size="xs">删除</lay-button>
          </template>
          <template v-slot:footer>
            {{ selectedKeys }}
          </template>
        </lay-table>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { layer } from '@layui/layer-vue';

const selectedKeys = ref(['1']);
const checkbox = ref(true);
const defaultToolbar = ref(false);

const queryParams = ref({});

const page = ref({ total: 100, limit: 10, current: 2 });

const columns = [
  {
    title: '人员编号',
    fixed: 'left',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '人员名称',
    key: 'name',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '工龄起算',
    key: 'status',
    customSlot: 'status',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '公司编码',
    key: 'email',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '职务级别',
    key: 'sex',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '性别',
    key: 'age',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '出生日期',
    key: 'city',
    sort: 'desc',
    ellipsisTooltip: true,
  },

  {
    title: '手机号码',
    fixed: 'left',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '备注',
    key: 'name',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '人员身份',
    key: 'status',
    customSlot: 'status',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '员工卡号',
    key: 'email',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '工资编号',
    key: 'sex',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '剩余假期',
    key: 'age',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '是否删除',
    key: 'city',
    sort: 'desc',
    ellipsisTooltip: true,
  },

  {
    title: '人员类型',
    fixed: 'left',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '人员级别排序',
    key: 'name',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '人员身份',
    key: 'status',
    customSlot: 'status',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '外部电子邮件',
    key: 'email',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '内部电子邮件',
    key: 'sex',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '是否禁用',
    key: 'age',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '企龄',
    key: 'city',
    sort: 'desc',
    ellipsisTooltip: true,
  },

  {
    title: '工龄',
    fixed: 'left',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '职称级别',
    key: 'name',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '职称类别',
    key: 'status',
    customSlot: 'status',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '副岗所在',
    key: 'email',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '保障需要',
    key: 'sex',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '年龄',
    key: 'age',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '接收异常',
    key: 'city',
    sort: 'desc',
    ellipsisTooltip: true,
  },

  {
    title: '详细',
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right',
    ignoreExport: true,
  },
];

const dataSource = [
  {
    id: '1',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '2',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '3',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '4',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '5',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '6',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '7',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '8',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '9',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '10',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '11',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
];

const rowClick = function (data: any) {};

const rowDoubleClick = function (data: any) {};

const change = function ({ current, limit }: any) {
  layer.msg('current:' + current + ' limit:' + limit);
};
function toSearch() {
  layer.load(2, { time: 3000 });
}
const searchAccount = ref('');
const searchEmail = ref('');
function toReset() {
  searchAccount.value = '';
  searchEmail.value = '';
}

// return {
//   columns,
//   dataSource,
//   selectedKeys,
//   checkbox,
//   defaultToolbar,
//   page,
//   rowClick,
//   rowDoubleClick,
//   change,
//   toReset,
//   toSearch,
//   searchAccount,
//   searchEmail
// }
</script>
